﻿<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title> XXX快递 </title>

    <script type="text/javascript" src="/admin/js/jquery.min.js"></script>
    <script type="text/javascript" src="/home/js/city-picker.data.js"></script>
    <script type="text/javascript" src="/home/js/city-picker.js"></script>

    <link rel="stylesheet" href="/home/map/css/main.css">
    <link rel="stylesheet" href="/home/map/css/zr.min.css">
    <link rel="stylesheet" href="/home/map/css/ui-base.css">
    <link rel="stylesheet" href="/home/map/css/area.css">
    <link rel="stylesheet" href="/home/map/css/map.css">
    <link rel="stylesheet" href="/home/map/css/components.css">
    <link rel="stylesheet" href="/home/map/css/common.css"/>
    <link rel="stylesheet" type="text/css" href="/home/userManager/css/common.css">
    <link rel="stylesheet" href="/home/branch/css/city-picker.css">
    <link rel="stylesheet" type="text/css" href="/home/layui/css/layui.css">


    <style>
        .b-cont-wrapper {
            top: 190px;
            left: 100px;
            position: absolute;
            z-index: 9999;
            width: 275px;
            background-color: #FFFFFF;
            padding: 16px 16px 0 16px;
            box-sizing: border-box;
            box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
        }
    </style>
</head>
<body>

<#include "common/header.ftl">
<#include "common/top_nav.ftl">

<div class="b-map" style="height: 800px">
    <div id="map" style="height: 800px">

    </div>
</div>


<div class="b-cont-wrapper">
    <h3>网点查询</h3>
    <div class="b-map-search-wrap">
        <div class="b-map-input-wrap">
            <input id="b-search-for-key-input" type="text" placeholder="根据省市区查找"
                   class="zr-input b-map-search zr-input-clear" data-toggle="city-picker" readonly>
        </div>
        <button class="zr-btn b-map-btn" id="b-search-btn">查询</button>
    </div>

    <ul class="b-branch-list" id="b-list">

    </ul>
</div>

<script type="text/javascript" src="/home/js/msg.js"></script>
<script type="text/javascript" src="/home/layui/layui.all.js"></script>
<script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=Gepby3PliGhP0Qcf2XssaUKxkBMfboWH"></script>
<script>

    var map = new BMapGL.Map('map'); // 创建Map实例
    var mPoint = new BMapGL.Point(116.404, 39.915);
    map.centerAndZoom(mPoint, 5); // 初始化地图,设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放


    $("#b-search-btn").click(function () {
        var address = $("#b-search-for-key-input").val();
        if (address == "") {
            errorMsg("请选择省市区");
            return;
        }
        if (address.split("/").length != 3) {
            errorMsg("请选择完整省市区");
            return;
        }

        $.ajax({
            type: "post",
            dataType: "json",
            url: "/home/map/query",
            data: {address: address},
            success: function (data) {
                if (data.code == 0) {
                    var userList = data.data;
                    map.clearOverlays();  //清除标记点
                    //超过五个设置盒子的高度
                    if (userList.length > 5) {
                        $(".b-cont-wrapper").attr("height", "650px");
                        $("#b-list").attr("height", "475px");
                    }
                    //首先请清除之前的li标签
                    $("#b-list").find("li").each(function () {
                        $(this).remove();
                    });

                    if (userList.length > 0) {
                        userList.forEach(function (e, i) {
                            var dd = e.longitudeAndIatitude.split(",");
                            var mPoint = new BMapGL.Point(dd[0], dd[1]);
                            var marker = new BMapGL.Marker(mPoint);
                            map.addOverlay(marker);
                            // 创建文本标注对象
                            var opts = {
                                position: mPoint, // 指定文本标注所在的地理位置
                                offset: new BMapGL.Size(10, -30) // 设置文本偏移量
                            };
                            var label = new BMapGL.Label((i + 1) + e.username, opts);
                            // 自定义文本标注样式
                            label.setStyle({
                                borderRadius: '5px',
                                borderColor: '#ccc',
                                fontSize: '16px',
                                height: '30px',
                                fontFamily: '微软雅黑'
                            });
                            map.addOverlay(label);

                            // 创建信息窗口
                            var opts1 = {
                                width: 240,
                                height: 130,
                                left: -114,
                                top: -183
                            };
                            var html = "<div style=\"margin: -1px; padding: 1px;\">" +
                                    "<h4 class=\"b-map-infoWin-site\">" + e.username + "&nbsp;</h4>" +
                                    "<p class=\"b-map-infoWin-address b-map-infoWin-content\" " +
                                    "style=\"max-width: 350px;width:240px;height:44px;\">" + e.officeAddress + "</p>" +
                                    "<p class=\"b-map-infoWin-tel b-map-infoWin-content\">" + e.mobile + "</p>" +
                                    "<div class=\"b-business-name-wrap b-map-infoWin-tags\"></div></div>";

                            var infoWindow = new BMapGL.InfoWindow(html, opts1);
                            // 点标记添加点击事件
                            marker.addEventListener('click', function () {
                                map.openInfoWindow(infoWindow, mPoint); // 开启信息窗口
                            });
                            //给左边的div添加li标签
                            $("#b-list").append("<li data-index=" + i + ">\n" +
                                    "<span>" + (i + 1) + "</span>\n" +
                                    "<h4>" + e.username + "&nbsp;</h4>\n" +
                                    "<p class=\"address\">" + e.officeAddress + "</p>\n" +
                                    "<p class=\"tel\">" + e.mobile + "</p>\n" +
                                    "</li>");
                        });
                    }
                    //设置中心点城市
                    var centerCity = address.split("/");
                    map.centerAndZoom(centerCity[2], 14);
                } else {
                    errorMsg(data.msg);
                }
            }
        });
    });


    //点击左边栏触发标注点点击事件
    $("#b-list").on("click", "li", function () {
        var bMapMarker = $(".BMap_Marker.BMap_noprint");
        bMapMarker[$(this).attr("data-index")].click();
    });


</script>


</body>
</html>
    

